<template>
    <div class="container">
        <h1 class="title">JSON 工具箱</h1>

        <div class="toolbar">
            <button class="btn format" @click="formatJSON">
                <span class="icon">✨</span>格式化
            </button>
            <button class="btn validate" @click="validateJSON">
                <span class="icon">✓</span>校验
            </button>
            <button class="btn minify" @click="minifyJSON">
                <span class="icon">⇲</span>压缩
            </button>
            <button class="btn copy" @click="copyOutput" :disabled="!jsonOutput">
                <span class="icon">⎘</span>复制
            </button>
            <button class="btn clear" @click="clearAll">
                <span class="icon">×</span>清空
            </button>
        </div>

        <div class="editor-area">
            <textarea v-model="jsonInput" placeholder="输入JSON内容..." class="input-area"></textarea>
            <div class="output-container" v-html="highlightedOutput"></div>
        </div>

        <div v-if="error" class="error-message">{{ error }}</div>
    </div>
</template>

<script>
import { FormatJSON, ValidateJSON, MinifyJSON } from '../../wailsjs/go/controller/jsonApp'

export default {
    data() {
        return {
            jsonInput: '',
            jsonOutput: '',
            error: ''
        }
    },
    computed: {
        highlightedOutput() {
            if (!this.jsonOutput) return '<div class="placeholder">格式化后的 JSON 将显示在此处...</div>'
            
            try {
                const json = JSON.parse(this.jsonOutput)
                const jsonStr = JSON.stringify(json, null, 2)
                return this.syntaxHighlight(jsonStr)
            } catch {
                return this.jsonOutput
            }
        }
    },
    methods: {
        syntaxHighlight(json) {
            json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
            return json.replace(
                /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
                match => {
                    let cls = 'number'
                    if (/^"/.test(match)) {
                        cls = /:$/.test(match) ? 'key' : 'string'
                    } else if (/true|false/.test(match)) {
                        cls = 'boolean'
                    } else if (/null/.test(match)) {
                        cls = 'null'
                    }
                    return `<span class="${cls}">${match}</span>`
                }
            )
        },
        async formatJSON() {
            try {
                this.error = ''
                this.jsonOutput = await FormatJSON(this.jsonInput)
            } catch (err) {
                this.error = err
                this.jsonOutput = ''
            }
        },
        async validateJSON() {
            try {
                this.error = ''
                this.jsonOutput = await ValidateJSON(this.jsonInput)
            } catch (err) {
                this.error = err
                this.jsonOutput = ''
            }
        },
        async minifyJSON() {
            try {
                this.error = ''
                this.jsonOutput = await MinifyJSON(this.jsonInput)
            } catch (err) {
                this.error = err
                this.jsonOutput = ''
            }
        },
        copyOutput() {
            navigator.clipboard.writeText(this.jsonOutput)
                .then(() => {
                    this.$message.success('复制成功！')
                    setTimeout(() => this.error = '', 2000)
                })
                .catch(err => {
                    this.error = '复制失败: ' + err
                })
        },
        clearAll() {
            this.jsonInput = ''
            this.jsonOutput = ''
            this.error = ''
        }
    }
}
</script>

<style scoped>

.container {
    padding: 20px;
    width: 100%;
    height: 100vh; /* 占据整个视口高度 */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.title {
    color: #2c3e50;
    text-align: center;
    margin-bottom: 24px;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.5vw, 2rem); /* 响应式字体 */
}


.toolbar {
    margin: 20px 0;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}


.btn {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.icon {
    font-size: 16px;
}

.format {
    background-color: #3498db;
    color: white;
}

.validate {
    background-color: #2ecc71;
    color: white;
}

.minify {
    background-color: #9b59b6;
    color: white;
}

.copy {
    background-color: #e67e22;
    color: white;
}

.clear {
    background-color: #e74c3c;
    color: white;
}

/* 编辑器区域响应式 */
.editor-area {
    display: flex;
    gap: 24px;
    flex: 1; /* 占据剩余空间 */
    min-height: 300px; /* 最小高度 */
    height: calc(100vh - 200px); /* 动态计算高度 */
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .editor-area {
        flex-direction: column;
        gap: 16px;
        height: auto;
    }
}


.input-area, .output-container {
    flex: 1;
    min-height: 200px; /* 最小高度 */
    width: 100%;
    padding: 16px;
    border-radius: 8px;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: clamp(0.8rem, 1.5vw, 1rem); /* 响应式字体 */
    line-height: 1.6;
    box-sizing: border-box;
    resize: none; /* 禁用默认拖拽 */
    overflow: auto;
}

/* 输入框动态调整 */
.input-area {
    border: 1px solid #dfe6e9;
    background-color: #f8f9fa;
    outline: none;
    transition: border 0.2s;
}


.input-area:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* 输出框动态调整 */
.output-container {
    background-color: #2c3e50;
    color: #ecf0f1;
    white-space: pre;
    overflow: auto;
}

.placeholder {
    color: #bdc3c7;
    font-style: italic;
}

.error-message {
    margin-top: 16px;
    padding: 12px;
    background-color: rgba(231, 76, 60, 0.1);
    border-left: 4px solid #e74c3c;
    color: #e74c3c;
    border-radius: 4px;
}

/* JSON高亮样式 */
.string { 
    color: #2ecc71;
    font-weight: 500;
}
.number { 
    color: #f39c12;
}
.boolean { 
    color: #9b59b6;
    font-style: italic;
}
.null { 
    color: #bdc3c7;
    font-style: italic;
}
.key { 
    color: #3498db;
    font-weight: bold;
}
</style>